<template>
  <div class="container">
    <img v-if="type === 'success'" class="image" src="../assets/success.svg" alt="成功图标">
    <img v-else class="image" src="../assets/error.svg" alt="错误图标">
    <h4>{{title}}</h4>
    <p v-if="msg">{{msg}}</p>
    <div v-for="(item,index) in btns" :key="index" class="button" :class="item.style" @click="handleGo(item.type,item.url)">{{item.txt}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      type: "",
      title: "",
      msg: "",
      btns: []
    }
  },
  created() {
    console.log("1xxxx");
    console.log('this.$route.query',this.$route.query);
    let { code, type, title, msg, btns } = { ...this.$route.query }
    if (code == 1) {
      this.code = code
      this.type = type
      this.title = title
      this.msg = msg
      'http://127.0.0.1:8080/#/showmsg?code=1&type=success&title=标题&msg=这是一段文本&btns=[{ "type": "button", "style": "primary", "txt": "文本内容","url": "back" }]'
      console.log(type);
      this.btns = JSON.parse(btns)
      // this.btns = JSON.parse(JSON.stringify))
    }
  },
  methods: {
    handleGo(type, url) {
      console.log(type, url);
      switch (type) {
        case 'button':
          if (url == 'back') {
            this.$router.go(-1)
          }else{
            window.location = url
          }
          break;
        case 'link':
          if (url == 'back') {
            this.$router.go(-1)
          }else{
            window.location = url
          }
          break;
        case 'span':
          break;
        default:
          break;
      }
    }
  },
}
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 200px 15vw 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  img{
    width: 300px;
    height: 300px;
  }
  h4 {
    font-size: 32px;
    color: #999;
  }
  p {
    font-size: 26px;
    color: #999;
    line-height: 48px;
  }
  .button {
    margin: 40px auto;
    width: 300px;
    height: 72px;
    line-height: 72px;
    font-size: 26px;
    border-radius: 6px;
    color: #fff;
    text-align: center;
     background: linear-gradient(
        108deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
  }
  .primary {
     background: linear-gradient(
        108deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
  }
  .warn {
    background-color: #ffb800;
  }
  .danger {
    background-color: #f00;
  }
  .image{
    width: 70vw;
    margin: 100px auto;
  }
}
</style>
